<template>
	<view>
		<view style="display: flex;background-color: #2758E6;justify-content: space-around;">
			<view style="display: flex;flex-direction: column;padding: 15px 0;align-items: center;" v-for="(obj,idx) in list" :key="idx" @click="clickHandle(idx, obj)">
				<view :style="{'flex':1,'color': 'white','font-size':idx==cidx?'16px':'14px'}">{{obj.name}}</view>
				<view style="height: 3px;background-color: white;margin-top: 5px;width: 25px;border-radius: 1.5px;" v-if="idx == cidx"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "STabs",
		props: ["list"],
		data() {
			return {
				cidx: 0
			};
		},
		methods: {
			clickHandle(idx, obj) {
				// console.log('obj', obj)
				this.cidx = idx;
				let statusName = obj.name
				this.$emit('getOrderData', statusName)
			}
		}
	}
</script>

<style>

</style>
